<template>
    <div class="certificate-item certificate-item-person" v-if="item" :style="{backgroundImage: `url(${item.bg || personCertificateBg})`}" :class="{ 'is-mobile': $isMobile }">

        <div class="special name">{{ name }}</div>
        <div class="special gender">{{ gender }}</div>

        <div class="special idNumber">{{ idNumber }}</div>
        <div class="special certificateName1">{{ certificateName1 }}</div>
        <div class="special certificateName2" v-if="certificateName2">{{ certificateName2 }}</div>

        <div class="special certificateNumber">{{ certificateNumber }}</div>

        <div class="special certificateNumber">{{ certificateNumber }}</div>

        <div class="special year">{{ year }}</div>


        <div class="special month">{{ month }}</div>


        <div class="special day">{{ day }}</div>



        <img :src="avatar" class="special avatar">

    </div>
</template>

<script>
import { DEFAULTAVATAR } from "@/utils/const";
const personCertificateBg = "https://buss-asso-1253854551.cos.ap-beijing.myqcloud.com/assets/user/avatar/personCertificate.png";
export default {
    props: ["item"],
    data() {
        return {
            personCertificateBg,
            name: "",
            gender: "",
            idNumber: "",
            certificateName: "",
            certificateNumber: "",
            avatar: "",
            year: "",
            month: "",
            day: "",

        }
    },

    computed: {
        certificateName1() {
            if (this.certificateName.length > 8) {
                return this.certificateName.substring(0, 8);
            } else {
                return this.certificateName
            }
        },



        certificateName2() {
            return this.certificateName.substring(8);
        },


    },

    mounted() {
        this.init();

        if (this.$isMobile) {
            const certificateItem = document.querySelector('.certificate-item-person.is-mobile');

            const viewportWidth = window.innerWidth;

            certificateItem.style.transform = `scale(${viewportWidth / 861})`;


        }
    },

    methods: {
        init() {
            let { name, gender, idNumber, certificateName, certificateNumber, avatar, createdAt } = this.item;
            this.name = name;
            this.gender = gender;
            this.idNumber = idNumber;
            this.certificateName = certificateName;
            this.certificateNumber = certificateNumber;
            this.avatar = avatar || DEFAULTAVATAR;

            if (createdAt) {
                const date = new Date(createdAt);
                this.year = date.getFullYear();
                this.month = date.getMonth() + 1;
                this.day = date.getDate();
            }
        }
                
    }

}

</script>

<style scoped lang="less">

.certificate-item.is-mobile {
    transform-origin: top left;
}
.certificate-item {
    position: relative;
    width: 861px;
    height: 592px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.special {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #1F1617;
    line-height: 19px;
    text-align: left;
    font-style: normal;
    position: absolute;
    font-weight: bolder;

}

.name {
    left: 204px;
    top: 307px;

}

.gender {
    left: 204px;
    top: 355px;
}

.idNumber {
    left: 204px;
    top: 402px;
}

.certificateNumber {
    left: 204px;
    bottom: 130px;
}


.certificateName1 {
    top: 181px;
    left: 681px;
}

.certificateName2 {
    top: 209px;
    left: 466px;
}


.year {
    left: 552px;
    top: 449px;

}

.month {
    left: 634px;
    top: 449px;
}
.day {
    left: 700px;
    top: 449px;
    
}

.avatar {
    width: 60px;
    height: 80px;
    top: 100px;
    left: 100px;
    top: 180px;
    left: 205px;
}


.bottom {
    width: 260px;
    height: 130px;
    bottom: 91px;
    right: 110px;
    background: url(../person-bottom.png) center center no-repeat;
}
</style>